{extends file="./main.tpl"}
{block name="head"}
<style type="text/css">
body
{
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
}
.comment_box
{
  background-color:#D3E7F5; border-bottom:#ffffff solid 1px; padding-top:3px
}
a
{
  text-decoration:none;
  color:#d02b55;
}
a:hover
{
  text-decoration:underline;
  color:#d02b55;
}
*{margin:0;padding:0;}


ol.timeline
{list-style:none;font-size:1.2em;}
ol.timeline li{ display:none;position:relative;padding:.7em 0 .6em 0;}ol.timeline li:first-child{}

#main
{
  width:500px; margin-top:20px; margin-left:100px;
  font-family:"Trebuchet MS";
}
#flash
{
  margin-left:100px;

}
.box
{
  height:85px;
  border-bottom:#dedede dashed 1px;
  margin-bottom:20px;
}
input
{
  color:#000000;
  font-size:14px;
  border:#666666 solid 2px;
  height:24px;
  margin-bottom:10px;
  width:200px;
}
textarea
{
  color:#000000;
  font-size:14px;
  border:#666666 solid 2px;
  height:124px;
  margin-bottom:10px;
  width:200px;
}
.titles{
  font-size:13px;
  padding-left:10px;
}
.star
{
  color:#FF0000; font-size:16px; font-weight:bold;
  padding-left:5px;
}

.com_img
{
  float: left; width: 80px; height: 80px; margin-right: 20px;
}
.com_name
{
  font-size: 16px; color: rgb(102, 51, 153); font-weight: bold;
}
</style>
{/block}

{block name="body"}
 <br /><br />
<div class="article">
  <div id="sliderFrame">
    <div id="slider">
      {section name="sec" loop=$menuArray}
        <img src="./admin/sliderImage/thumb/{$menuArray[sec].sliderImg}" height="60" width="200" class="margin">
      {/section}
    </div>
    <div id="htmlcaption" style="display: none;">
      <em>HTML</em> caption. Link to <a href="http://www.google.com/">Google</a>.
    </div>
  </div>
  <br /><br /><br />
  <form name="ckEntry" action="{$smarty.server.PHP_SELF}" id="ckEntry" method="POST">
    <table border='0' cellpadding='1' cellspacing='2' align='center'>
      <tr>
        <td class="table1" align='center' ><b></b></td>
      </tr>
      {section name="sec" loop=$editorArray}
      <tr>
        <td class="table2" align="left">{$editorArray[sec].editor}</td>
      </tr>
      {/section}
    </table>
  </form>
</div>

<!-- ============ Start Display Comment =========== -->
<div id="main">
  <ol  id="update" class="timeline">
  	{section name=sec loop=$commentArray}
    <li class="box">
      <span class="com_name">{$commentArray[sec].name}</span> <br />
      {$commentArray[sec].comment}
    </li>
    {/section}
  </ol>
  <div id="flash" align="left"  ></div>
</div>
<!-- ============ End Display Comment =========== -->

<div class="article">
  <div class="clr"></div>
  <form action="#" method="post">
    <table class="table1" width="300" border="0" cellpadding="0" cellspacing="1">
      <tr>
        <td><font size="4px">Name :</font></td>
      </tr>
      <tr>
        <td><input id="name" class="text1" name="name" type="text" required /></td>
      </tr>
      <tr>
        <td><font size="4px">Email :</font></td>
      </tr>
      <tr>
        <td><input id="email" class="text1" name="email" type="text" required /></td>
      </tr>
      <tr>
        <td><font size="4px">Your Comment :</font></td>
      </tr>
      <tr>
        <td><textarea id="comment" name="comment" required rows="8" cols="50"></textarea></td>
      </tr>
      <tr>
        <td><input class="submit" name="insertBtn" value="Submit Comment" type="submit" /></td>
      </tr>
    </table>
  </form>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	alert("hiii");
  $('.submit').click(function(){
  	alert("hiii");
    var name = $("#name").val();
    var name = $("#email").val();
    var name = $("#comment").val();
    var dataString = 'name='+ name + '&email=' + email + '&comment=' + comment;
    if(name=='' || email=='' || comment=='')
    {
      alert('Please Give Valide Details');
    }
	  else
	  {
	    $("#flash").show();
	    $("#flash").fadeIn(400).html('<img src="ajax-loader.gif" align="absmiddle">&nbsp;<span class="loading">Loading Comment...</span>');
      $.ajax({
	  	  type: "POST",
        url: "commentajax.php",
        data: dataString,
        cache: false,
        success: function(html){
          $("ol#update").append(html);
          $("ol#update li:last").fadeIn("slow");
          document.getElementById('email').value='';
          document.getElementById('name').value='';
          document.getElementById('comment').value='';
	        $("#name").focus();
          $("#flash").hide();
        }
      });
    }
    return false;
  });
});
function abc()
{
  alert("hiii");
}
</script>
{/block}
